<template>
  <div class="ma-content-block flex flex_column p-4" style="height: 85vh">
    <div class="flex justify-between home-page-title" style="margin-bottom: 2%">
      <div class="flex">
        <!-- <a-popover title="选择时间" position="bottom" trigger="click">
            <a-button type="primary"  size="large">运营报表</a-button>
            <template #content>
                <a-range-picker  :hide-trigger="true"  @change="handleExport($event,4)" />
                <div style="display:flex;align-items:center;justify-content:end;margin-top:2%">
                    <a-button type="primary" @click="handleWeekRequest">确定</a-button>
                </div>
            </template>
        </a-popover> -->
        <div class='flex align_center'>
            <div>选择时间：</div>
            <div class="datetime flex"  style="width: 300px;margin-left: 24px">
                <a-range-picker    @change="handleExport($event)" />
            </div>
        </div>
        <!-- <div class="datetime flex" style="margin-left: 24px">
          <a-range-picker
            mode="month"
            style="width: 268px"
            v-model="currentTime"
            @change="onChange"
          >
            <span> 自定义 </span>
          </a-range-picker>
        </div> -->
      </div>
      <a-button type="primary" @click="handleExports">导 出</a-button>
    </div>
    
    <div class='tableBox' v-dragscroll style="height: 90%;overflow:auto;" >
        <div class=" flex flex_column flex_1" style="height: fit-content;width:fit-content;">
            <div class="flexbox bor_right bor_btm" style="background: rgba(242, 243, 245, 1);height:50px;position:sticky;top:0;background:rgba(242, 243, 245, 1);z-index:99">
                <div style="font-size: 20px; font-weight: 600">
                    威 斯 腾 专 用 线 装 卸 作 业 报 表
                </div>
            </div>
            <div class="flex" style="background: rgba(242, 243, 245, 1); font-weight: 600;position:sticky;top:50px;background:rgba(242, 243, 245, 1);z-index:99">
                <div class=" flexbox bor_right bor_btm" style='width:200px;position:sticky;left:0;background:rgba(242, 243, 245, 1);'>
                    <div class='pad8'>项目类型</div>
                </div>
                <div class=" flexbox bor_right bor_btm" style='width:200px;position:sticky;left:200px;background:rgba(242, 243, 245, 1);'>
                    <div class='pad8'>签署公司</div>
                </div>
                <div class=" flexbox bor_right bor_btm" style='width:200px;position:sticky;left:400px;background:rgba(242, 243, 245, 1);'>
                    <div class='pad8'>客户名称</div>
                </div>

                <div  style='width:2400px'>
                    <div class='flex '>
                        <div class=" flexbox bor_right bor_btm flex_1" >
                            <div class='pad8'>业务量</div>
                        </div>
                    </div>
                    <div class="flex">
                        <div class='flex_1 flex flex_column'>
                            <div class=" flexbox bor_right bor_btm flex_1" >
                                <div class='pad8'>{{th1}} 至 {{th2}}</div>
                            </div>
                            <div class='flex ' >
                                <div class='flex_1' >
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>到货</div>
                                    </div>
                                    <div class='flex'>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>20英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>40英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm">
                                                <div class='pad8'>非集装箱/万吨</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class='flex_1' >
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>提货</div>
                                    </div>
                                    <div class='flex'>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>20英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>40英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm">
                                                <div class='pad8'>非集装箱/万吨</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='flex_1 flex flex_column'>
                            <div class=" flexbox bor_right bor_btm flex_1" >
                                <div class='pad8'>{{newYear}}</div>
                            </div>
                            <div class='flex ' >
                                <div class='flex_1' >
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>到货</div>
                                    </div>
                                    <div class='flex'>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>20英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>40英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm">
                                                <div class='pad8'>非集装箱/万吨</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class='flex_1' >
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>提货</div>
                                    </div>
                                    <div class='flex'>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>20英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm" >
                                                <div class='pad8'>40英尺</div>
                                            </div>
                                        </div>
                                        <div class='flex_1'>
                                            <div class=" flexbox bor_right bor_btm">
                                                <div class='pad8'>非集装箱/万吨</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div  style='width:1200px;' class='flex flex_column'>
                    <div class='flex '>
                        <div class=" flexbox bor_right bor_btm flex_1" >
                            <div class='pad8'>累计收入</div>
                        </div>
                    </div>
                    <div class="flex flex_1">
                        <div class='flex_1 flex flex_column'>
                            <div class=" flexbox bor_right bor_btm flex_1" >
                                <div class='pad8'>{{th1}} 至 {{th2}}累计收入</div>
                            </div>
                            <div class='flex ' >
                                <div class='flex flex_1'>
                                    <div class='flex_1'>
                                        <div class=" flexbox bor_right bor_btm" >
                                            <div class='pad8'>已提货已开票</div>
                                        </div>
                                    </div>
                                    <div class='flex_1'>
                                        <div class=" flexbox bor_right bor_btm" >
                                            <div class='pad8'>已提货未结算</div>
                                        </div>
                                    </div>
                                    <div class='flex_1'>
                                        <div class=" flexbox bor_right bor_btm">
                                            <div class='pad8'>预计收入</div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <div class='flex_1 flex flex_column'>
                            <div class=" flexbox bor_right bor_btm flex_1" >
                                <div class='pad8'>{{newYear}}累计收入</div>
                            </div>
                            <div class='flex '>
                                <div class='flex_1'>
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>未开票</div>
                                    </div>
                                </div>
                                <div class='flex_1'>
                                    <div class=" flexbox bor_right bor_btm" >
                                        <div class='pad8'>已开票</div>
                                    </div>
                                </div>
                                <div class='flex_1'>
                                    <div class=" flexbox bor_right bor_btm">
                                        <div class='pad8'>收入合计</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex_1 scrollbar"  v-if='!loading'>
                <div class='flex' v-for='(item,index) in listData' :key='index' >
                    <div class="flexbox bor_right bor_btm" style='width:200px;position:sticky;left:0;background:rgba(242, 243, 245, 1);'>
                        <div class='pad8'>{{item.title}}</div>
                    </div>
                    <div class='flex'>
                        <div class='flex flex_column' >
                            <div class='flex'  v-for='(items,indexs) in item.children' :key='indexs' >
                                <div class="flexbox bor_right bor_btm" style='width:200px;background:rgba(242, 243, 245, 1);position:sticky;left:200px;' >
                                    <div class='pad8'>威斯腾物流</div>
                                </div>
                                <div class="flexbox bor_right bor_btm"  style='width:200px;background:rgba(242, 243, 245, 1);position:sticky;left:400px;'>
                                    <div class='pad8'>{{items.title}}</div>
                                </div>
                                <div class="flexbox bor_right bor_btm" v-for='(ite,ind) in 18' :key='ind'  style='width:200px;background:rgba(242, 243, 245, 1);'>
                                    <div class='pad8' v-if='item.title == "合计"'>{{(ite - 1) == 2 || (ite - 1) == 5 || (ite - 1) == 8 || (ite - 1) == 11?(items['value_' + (ite - 1)] - 0).toFixed(3):(ite - 1) == 14 || (ite - 1) == 17?(items['value_' + (ite - 1)] - 0).toFixed(2):items['value_' + (ite - 1)]}}</div>
                                    <div class='pad8' v-else>{{items['value_' + (ite - 1)]}}</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    
                </div>
                
            </div>
            <div class='flexbox' style='width:100%;height:100%' v-else>
                <div >暂无数据</div>
            </div>
            
        </div>
    </div>

    <div style="padding-bottom: 2%"></div>
    <!-- 加载中... -->
    <div
      v-if="loading"
      style="
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100;
        display: flex;
        top: 0;
        left: 0;
        
        justify-content: center;
        align-items: center;
      "
    >
      <a-spin dot :size="10" />
    </div>
  </div>
</template>
  <script setup>
import { ref, reactive, onMounted } from "vue";
import { request } from "@/utils/request.js";
import financialMoneyFzsr from "@/api/financial/financialMoneyFzsr";
import { Message } from "@arco-design/web-vue";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import { ElMapExportTable } from "table-excel";
import timeFormat from "@/utils/timeFormat.js";
const loading = ref(false)
const range_dates = ref([])
const th1 = ref('')
const th2 = ref('')
let weekDate = []
let column = []
let data = []
const listData = ref([])
const newDate = new Date();
// 当年
const newYear = newDate.getFullYear();
// 当月
const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
// 本月天数
const newMaxDay = new Date(newYear, newMonth, 0).getDate();
onMounted(() => {
    let range_date = [`${newYear}-${newMonth}-01 00:00:00`,`${newYear}-${newMonth}-${newMaxDay} 23:59:59`]
    th1.value = `${newYear}-${newMonth}-01`
    th2.value = `${newYear}-${newMonth}-${newMaxDay}`
    handleExportData(range_date)
});
const handleExportData = (range_date) =>{
    let day_tt = range_date[0].split(' ')[0] + '至' + range_date[1].split(' ')[0]
    let year = range_date[0].split(' ')[0].split('-')[0]
    loading.value = true
    request({
            url:'prediction/Tz/yybzb',
            method: 'get',
            params:{
                type:4,
                range_date:range_date
            },
        }).then(res=>{
            listData.value = res.data
            let totalData = {
                value_0 : 0,
                value_1 : 0,
                value_2 : 0,
                value_3 : 0,
                value_4 : 0,
                value_5 : 0,
                value_6 : 0,
                value_7 : 0,
                value_8 : 0,
                value_9 : 0,
                value_10 : 0,
                value_11 : 0,
                value_12 : '',
                value_13 : '',
                value_14 : '',
                value_15 : '',
                value_16 : '',
                value_17 : '',
                title : ''
            }
            listData.value.map((v,i)=>{
                if(v.title != '合计'){
                    v.children.map((vv,ii)=>{
                        for(let j = 0;j<18;j++){
                            if(j < 12){
                                totalData['value_' + j] += (vv['value_' + j] - 0)
                            }else{
                                totalData['value_' + j] = (totalData['value_' + j] - 0) + (vv['value_' + j] - 0)
                                if(totalData['value_' + j] == 0){
                                    totalData['value_' + j] = ''
                                }
                            }
                            
                        }
                    })
                }
                
            })
            listData.value[2].children = [totalData]

            let _data = JSON.parse(JSON.stringify(listData.value))
            let objArr = []
            let columns = []
            console.log('_data:',_data)
            _data.map((v,i)=>{
                v.children.map((vv,ii)=>{
                    let arr = {}
                    arr.one_title = v.title
                    arr.two_title = '威斯腾物流'
                    arr.three_title = vv.title
                    for(let j = 0;j<18;j++){
                        if(j < 12){
                            arr['value_' + j] = (vv['value_' + j] - 0)
                        }else{
                            arr['value_' + j] = vv['value_' + j]
                        }
                    }
                    objArr.push(arr)
                })
            })
            console.log('objArr:',objArr)
            // objArr.map((v,i)=>{
            //     v.value_0 = v.value_0 - 0 || 0
            //     v.value_1 = v.value_1 || 0
            //     v.value_2 = (v.value_2 - 0).toFixed(3) || 0
            //     v.value_3 = v.value_3 - 0 || 0
            //     v.value_4 = v.value_4 || 0
            //     v.value_5 = (v.value_5 - 0).toFixed(3) || 0
            //     _data.map((vv,ii)=>{
            //         if(v.index == vv.i){
            //             v.one_title = vv.one_title || ''
            //             vv.children.map((vvv,iii)=>{
            //                 if(vvv.i == v.twoindex){
            //                     v.two_title = vvv.two_title || ''
            //                 }
            //             })
            //         }
            //     })
            // })
            columns = [
                {title:'威斯腾铁路专用线生产指标统计',children:[
                    {title:'项目类型',dataIndex:'one_title'},
                    {title:'签署公司',dataIndex:'two_title'},
                    {title:'客户名称',dataIndex:'three_title'},
                    {title:'业务量',children:[
                            {title:`${day_tt}`,children:[
                                {title:`到货`,children:[
                                    {title:'20英尺',dataIndex:'value_0'},
                                    {title:'40英尺',dataIndex:'value_1'},
                                    {title:'非集装箱/万吨',dataIndex:'value_2'},
                                ]},
                                {title:`提货`,children:[
                                    {title:'20英尺',dataIndex:'value_3'},
                                    {title:'40英尺',dataIndex:'value_4'},
                                    {title:'非集装箱/万吨',dataIndex:'value_5'},
                                ]}
                            ]},
                        {title:`${year}`,children:[
                            {title:`到货`,children:[
                                {title:'20英尺',dataIndex:'value_6'},
                                {title:'40英尺',dataIndex:'value_7'},
                                {title:'非集装箱/万吨',dataIndex:'value_8'},
                            ]},
                            {title:`提货`,children:[
                                {title:'20英尺',dataIndex:'value_9'},
                                {title:'40英尺',dataIndex:'value_10'},
                                {title:'非集装箱/万吨',dataIndex:'value_11'},
                            ]}
                        ]},
                    ]},
                    {title:'累计收入',children:[
                            {title:'周累计收入',children:[
                            {title:'已提货已开票',dataIndex:'value_12'},
                            {title:'已提货未结算',dataIndex:'value_13'},
                            {title:'预计收入',dataIndex:'value_14'},
                        ]},
                        {title:'年累计收入',children:[
                            {title:'未开票',dataIndex:'value_15'},
                            {title:'已开票',dataIndex:'value_16'},
                            {title:'收入合计',dataIndex:'value_17'},
                        ]},
                    ]},
                ]}
                

            ]
            column= columns
            data = objArr
            weekDate = _data
            loading.value = false
            // handleExports()
        })
}
// 点击导出触发的函数
const handleExports = ()=> {
      const instance = new ElMapExportTable(
        {
            column,
            data,
            spanMethod: ({ rowIndex, columnIndex }) => {
                // rowIndex 纵   columnIndex   横  rowspan 纵向合并  colspan横向合并
                return testFormData(weekDate,rowIndex,columnIndex)
            },
            setRowStyle({ data, columnIndex, rowIndex, type }) {
            if (type === "main") {
              return {
                height: 40,
              };
            }
          },
        },
        // {progress: progress => console.log(progress)}
      );
      instance.download("威斯腾铁路专用线生产指标统计");
}
// 下面是导出数据

const testFormData = (item,rowIndex,columnIndex) =>{
            let zong = 0 
            console.log(item)
            // if (rowIndex  === 0 && columnIndex === 0) {
            //     return {
            //         rowspan: 2,
            //         colspan: 1,
            //     };
            // }
            for(let i=0;i<item.length;i++){
                zong = zong + item[i].children.length
                if (rowIndex  === zong - item[i].children.length  && columnIndex === 0) {
                    return {
                        rowspan: item[i].children.length,
                        colspan: 1,
                    };
                }
            }
            // item.map((v,i)=>{
            //     zong = zong + v.children.length
            //     if(i == 0){
            //         if (rowIndex  === 0 && columnIndex === 0) {
            //             return {
            //                 rowspan: 2,
            //                 colspan: 1,
            //             };
            //         }
            //     }else{
            //         if (rowIndex  === zong - v.children.length  && columnIndex === 0) {
            //             return {
            //                 rowspan: zong,
            //                 colspan: 1,
            //             };
            //         }
            //     }
                
            // })


            // for(let i=0;i<item.length;i++){
            //     if(i == 0){
            //         if (rowIndex  === 0 && columnIndex === 0) {
            //             return {
            //                 rowspan: item[i].zong,
            //                 colspan: 1,
            //             };
            //         }
            //     }else{
            //         if (rowIndex  === oneArr[i - 1] && columnIndex === 0) {
            //             return {
            //                 rowspan: item[i].zong,
            //                 colspan: 1,
            //             };
            //         }
            //     }
            // }
            // for(let ii = 0;ii<childrenArr.length;ii++){
            //             if(ii == 0){
            //                     if (rowIndex  === 0 && columnIndex === 1) {
            //                         return {
            //                             rowspan: childrenArr[ii].zong,
            //                             colspan: 1,
            //                         };
            //                     }
            //                 }else{
            //                     if (rowIndex  === twoArr[ii - 1] && columnIndex === 1) {
            //                         return {
            //                             rowspan:childrenArr[ii].zong,
            //                             colspan:1,
            //                         };
            //                     }
            //                 }
            //         }
}
const handleExport = async(e,tab)=>{
    let arr1 = e[0].split(' ')
    let arr2 = e[1].split(' ')
    th1.value = e[0].split(' ')
    th2.value = e[1].split(' ')
    range_dates.value = [arr1[0] + ' 00:00:00',arr2[0] + ' 23:59:59']
    handleExportData(range_dates.value)
}
</script>
  <style scoped lang="less">
  .align_center{
      align-items: center;
  }
.home-page-title {
  align-items: center !important;

  img {
    height: 30px;
  }

  .datetime {
    align-items: center;
    p {
      font-size: 20px;
      color: #415b73;
      margin-left: 20px;
      font-style: italic;
    }

    span {
      width: 64px;
      border-radius: 32px;
      padding: 4px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      color: #00a0e9;
      border: 1px solid #00a0e9;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;

      &.active {
        background: #00a0e9;
        color: #fff;
      }
    }
  }
}
</style>
<style>

.tableBox {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    scrollbar-width: none;
    cursor: pointer;
  }
  .tableBox::-webkit-scrollbar {
    display: none; /* 对于Chrome, Safari和Opera */
  }
.tableBox div {
  box-sizing: border-box;
  text-align: center;
}
.scrollbar {
  scrollbar-width: none;
}
.scrollbar::-webkit-scrollbar {
  display: none; /* 对于Chrome, Safari和Opera */
}
.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.height40 {
  min-height: 40px;
}
.bor_btm {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.bor_right {
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.flex_1 {
  flex: 1;
}
.pad8 {
  padding: 4px;
}
.flex_column {
  flex-direction: column;
}
.calc1 {
  width: calc(100% / 21);
}
.calc2 {
  width: calc((100% / 21) * 2);
}
.calc3 {
  width: calc((100% / 21) * 3);
}
.calc4 {
  width: calc((100% / 21) * 4);
}
.calc5 {
  width: calc((100% / 21) * 5);
}
.calc6 {
  width: calc((100% / 21) * 6);
}
.calc7 {
  width: calc((100% / 21) * 7);
}
.calc8 {
  width: calc((100% / 21) * 8);
}
.calc9 {
  width: calc((100% / 21) * 9);
}
.calc10 {
  width: calc((100% / 21) * 10);
}
.calc11 {
  width: calc((100% / 21) * 11);
}
.calc12 {
  width: calc((100% / 21) * 12);
}
.calc13 {
  width: calc((100% / 21) * 13);
}
.calc15 {
  width: calc((100% / 21) * 15);
}
.calc16 {
  width: calc((100% / 21) * 16);
}
.calc17 {
  width: calc((100% / 21) * 17);
}
.calc18 {
  width: calc((100% / 21) * 18);
}
.calc19 {
  width: calc((100% / 21) * 19);
}
.calc20 {
  width: calc((100% / 21) * 20);
}
.calc21 {
  width: calc((100% / 21) * 21);
}
</style>
  <script>
export default { name: "ledger:ledger_report" };
</script>